<template>
  <div class="pedestrian-flow" ref="PedestrianFlow"></div>
</template>
<script>
import * as echarts from 'echarts';
export default {
  name: 'PedestrianFlow',
  data() {
    return {
      chartDom: null,
      option: {}
    }
  },
  mounted() {
    this.init()
    window.addEventListener('resize', this.resize)
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.resize)
  },
  methods: {
    init() {
      this.chartDom = echarts.init(this.$refs.PedestrianFlow)
      this.option = {
        grid: {
          top: '40px',
          left: '40px',
          bottom: '60px',
          right: '0'
        },
        xAxis: {
          type: 'category',
          boundaryGap: true,
          data: ['2时', '4时', '6时', '8时', '10时', '12时', '14时', '16时', '18时', '20时', '22时', '24时'],
          splitLine: {
            show: false,
          },
          axisLabel: {
            textStyle: {
              color: '#8A99A6',
              align: 'center',
              fontSize: '0.875rem'
            },
          },
          axisLine: {
            lineStyle: {
              color: "#162436"
            }
          },
          axisTick: {
            show: false
          }
        },
        yAxis: {
          type: 'value',
          name: '(人)',
          nameTextStyle: {
            color: '#FFFFFF',
            padding: [0, '30', 0, '0'],
            fontSize: '0.875rem'
          },
          splitLine: {
            show: false,
          },
          axisLabel: {
            textStyle: {
              color: '#8A99A6',
              fontSize: '0.875rem'
            },
          },
          axisTick: {
            show: false
          }
        },
        series: [
          {
            data: [820, 932, 901, 934, 1290, 1330, 1320, 901, 934, 1290, 1330, 1320],
            type: 'line',
            symbolSize: 8,
            symbol: 'emptyCircle', // 使用空心圆作为符号
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: 'rgba(237,181,63,1)' },
                  { offset: 1, color: 'rgba(237,181,63,0)' },
                ]),
              }
            },
            itemStyle: {
              // normal: {
                
              // }
              color: 'rgba(237,181,63,1)',
                borderColor: '#333',
                borderWidth: 2,
                lineStyle: {
                  color: 'rgba(237,181,63,1)'
                }
            },

            

          }
        ]
      }
      this.chartDom.setOption(this.option)
    },
    resize() {
      this.chartDom.resize()
    },
  }
}
</script>
<style lang="scss" scoped>
.pedestrian-flow {
  width: 100%;
  height: 16.333333333333332rem;
}
</style>